<!-- 素养达成率图表组件 -->
<template>
  <div class="lean-container" ref="leanChart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Lean',
  data() {
    return {
      chart: null,
      colors: ["#00eaff", "#00c0ff", "#0090ff", "#0060ff", "#3030ff", "#6000ff"],
      option: {
        backgroundColor: "transparent",
        color: ["#00eaff", "#00c0ff", "#0090ff", "#0060ff", "#3030ff", "#6000ff"],
        grid: {
          left: -100,
          top: -50,  // 减小顶部间距到30px
          bottom: 0,
          right: 10,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}分",
          backgroundColor: 'rgba(0, 20, 40, 0.9)',
          borderColor: '#00F6FF',
          borderWidth: 1,
          textStyle: {
            color: '#FFFFFF',
            fontSize: 14
          },
          extraCssText: 'box-shadow: 0 0 15px rgba(0, 246, 255, 0.6); border-radius: 4px; backdrop-filter: blur(5px);'
        },
        polar: {
          radius: '100%'
        },
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 246, 255, 0.3)",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#00F6FF",
            margin: 8,
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 246, 255, 0.1)",
              width: 1,
              type: "dashed"
            }
          }
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 246, 255, 0.3)",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            formatter: '{value}',
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: "rgba(0, 246, 255, 0.1)",
              width: 1,
              type: "dashed"
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ["5%", "10%"],
            labelLine: { show: false },
            data: [{ name: '', value: 0, itemStyle: { color: "rgba(0, 246, 255, 0.1)" } }],
            emphasis: { scale: false }
          },
          {
            type: 'pie',
            radius: ["90%", "95%"],
            labelLine: { show: false },
            data: [{ name: '', value: 0, itemStyle: { color: "rgba(0, 246, 255, 0.1)" } }],
            emphasis: { scale: false }
          },
          {
            stack: 'a',
            type: 'pie',
            radius: ['25%', '70%'],
            roseType: 'area',
            zlevel: 10,
            label: {
              show: true,
              position: 'outside',
              formatter: params => `{a|${params.name}}\n{b|${params.value}分}`,
              fontSize: 11,
              color: '#FFFFFF',
              rich: {
                a: { color: '#00F6FF', fontSize: 12, lineHeight: 16, align: 'center' },
                b: { color: '#FFFFFF', fontSize: 11, align: 'center' }
              }
            },
            labelLine: {
              show: true,
              lineStyle: { color: 'rgba(0, 246, 255, 0.5)' },
              length: 10,
              length2: 10
            },
            itemStyle: {
                shadowBlur: 30,
                shadowColor: 'rgba(0, 246, 255, 0.4)',
                borderWidth: 1,
                borderColor: 'rgba(0, 246, 255, 0.3)'
            },
            data: []
          }
        ]
      }
    }
  },
  computed: {
    requestData() {
      return {
        missionType: this.$store.state.mission,
        studentClassId: this.$store.state.current,
        targetType: 2
      }
    }
  },
  watch: {
    requestData: {
      handler: 'fetchDataAndInitChart',
      deep: true
    }
  },
  mounted() {
    this.fetchDataAndInitChart()
  },
  beforeDestroy() {
    this.chart?.dispose()
  },
  methods: {
    async fetchDataAndInitChart() {
      try {
        const response = await this.$axios.post("/group/averageScoreByGroup", this.requestData)
        const { type } = response.data.data
        
        if (!type?.[0]?.length) {
          console.warn('数据格式不正确或为空')
          return
        }
        
        const dynamicData = type[0]
        this.option.angleAxis.data = dynamicData.map(item => item.name || '')
        this.option.series[2].data = dynamicData.map((item, index) => ({
          value: item.score || 0,
          name: `第${item.group || '未知'}组: `,
          itemStyle: {
              color: this.colors[index % this.colors.length],
              shadowBlur: 20,
              shadowColor: this.colors[index % this.colors.length]
          }
        }))
        
        this.initChart()
      } catch (error) {
        console.error('请求失败', error)
      }
    },
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.leanChart)
      }
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style scoped>
.lean-container {
  width: 96%;
  height: calc(100% - 80px); /* 修改高度计算方式 */
  margin: 20px 0; /* 增加上下外边距 */
}
</style>